const path  = require("path");

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, 'dist')
    },
    module: {
        rules: [
            // {
            //     test: /\.css$/, // 一般是一个正则表达式，用来匹配我们需要处理的文件类型
            //     use: [
            //         {
            //             loader: "style-loader"
            //         },
            //         {
            //             loader: "css-loader",
            //         }
            //     ]
            // },
            // {
            //     test: /\.css$/, // 一般是一个正则表达式，用来匹配我们需要处理的文件类型
            //     use: [
            //         "style-loader",
            //         "css-loader",
            //         {
            //             loader: "postcss-loader",
            //             options: {
            //                 postcssOptions:{
            //                     plugins: [
            //                         // require("autoprefixer"),
            //                         // require('postcss-preset-env')
            //                          // postcss-preset-env 是一个插件的集合所以可直接简写为
            //                         'postcss-preset-env'
            //                     ]
            //                 }
            //             }
            //         }
            //     ]
            // },
            {
                test: /\.css$/,
                use: [
                    "style-loader",
                    {
                        loader: "css-loader",
                        options:{
                            importLoaders:1,
                            esModule: false
                        }
                    },
                    "postcss-loader",
                ]
            },
            {
                test: /\.less$/,
                use: [
                    "style-loader",
                    "css-loader",
                    "postcss-loader",
                    "less-loader"
                ]
            },
            // {
            //     test: /\.(png|jpe?g|svg|gif)$/,
            //     use: {
            //         loader: "file-loader",
            //         options: {
            //             name: '[name].[hash:6].[ext]',
            //             outputPath:'img'
            //         }
            //     }
            // },
            // {
            //     test: /\.(png|jpe?g|svg|gif)$/,
            //     use: {
            //         loader: "file-loader",
            //         options: {
            //             esModule: false // 不转为 esModule
            //         }
            //     }
            // },
            {
                test: /\.(png|jpe?g|svg|gif)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: 'img/[name].[hash:6].[ext]',
                        limit: 25 * 1024
                    }
                }
            },
        ]
    }
}